<template>
  <div class="echart-shared-action">
    <table class="echart_table">
      <tr>
        <th>{{ $demoi18n('echart.th.operationType') }}</th>
        <th>{{ $demoi18n('echart.th.operationKey') }}<Helptip>{{ $demoi18n('echart.th.operationKey.tip') }}</Helptip>
        </th>
        <th></th>
      </tr>
      <tr
        v-for="(n, i) in actions"
        :key="i"
      >
        <td>
          <ValueInputer
            v-model:value="n.type"
            value-type="List"
            :enum-values="actionTypes"
          />
        </td>
        <td>
          <ValueInputer v-model:value="n.key" />
        </td>
        <td>
          <el-button
            icon="Delete"
            :link="true"
            type="primary"
            size="default"
            @click="delAction(n)"
          ></el-button>
        </td>
      </tr>
    </table>

    <el-button
      icon="Plus"
      size="default"
      @click="addAction()"
    >
      {{ $demoi18n('btn.add') }}
    </el-button>
  </div>
</template>
<script>
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { echartActionTypes } from '@/components/common/echart/form-item-options.js';
import echartUtil from '@/components/common/echart/echart-util.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import Helptip from '@/components/common/helptip/helptip.vue';

export default {
  components: { ValueInputer, Helptip },
  mixins: [EchartCommonMixin],
  inject: ['widgetInstanceId'],
  props: {},
  data() {
    return {
      actions: [],
    };
  },
  computed: {
    actionTypes() {
      let _actTypes = echartActionTypes;
      const comps = ['basic-pie', 'rose-pie', 'multidimensional-pie'];
      if (comps.includes(this.form.echart._componentName)) {
        _actTypes = echartActionTypes.filter(n => n.value === 'legend');
      }
      return _actTypes;
    },
  },
  watch: {},
  created() {
    this.initActions();
  },
  methods: {
    initActions() {
      echartUtil.registerVar('echart._sharedActions', this.form, this, []);
      this.actions = this.form.echart._sharedActions;
    },
    addAction() {
      this.actions.push({
        key: '',
        type: '',
      });
    },
    delAction(n) {
      const index = this.actions.indexOf(n);
      this.actions.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
@import '../less/echart-common.less';
</style>
